<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商户角色管理</title>
</head>
<style>
    .wu-pos-a {
        box-sizing: border-box;
        padding-top: 39px;
        width: 20%;
        left: auto;
        right: 0;
    }
</style>

<body>
<div class="pos-r">
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首页
        <span class="c-gray en">&gt;</span>系统管理
        <span class="c-gray en">&gt;</span> 角色管理
    </nav>
    <div class="pos-a wu-pos-a" >
        <div class="wu-tree">菜单树</div>
        <div class="wu-treeBox">
            <ul id="systemRoleTree" class="ztree"></ul>
        </div>

    </div>
    <div style="margin-right:22%">
        <div class="page-container">
            <div id="merchantRoleToolbar">
                <a class="btn btn-primary radius"
                   data-title="添加角色"
                   data-href="platform/system/role-add.html"
                   onclick="Hui_admin_tab(this)" href="javascript:;">
                    <i class="Hui-iconfont">&#xe600;</i> 添加角色
                </a>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    <table id="bizRoleTable" class="table table-bordered table-striped text-center">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--修改的模态框-->
<div id="editModal" class="modal fade system-edit-modal" tabindex="-1" role="dialog">
    <input id="indexId" value="" style="display: none;"/>
    <div class="modal-dialog" role="document" style="height: 80%">
        <div class="modal-content" style="height: 100%">
            <div class="modal-header H65">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h3 class="modal-title">修改权限</h3>
            </div>
            <div class="modal-body calcH130">
                <div class="row">
                    <div class="form-group">
                        <label class="control-label col-xs-4 col-sm-3">角色名称：</label>
                        <div class="formControls col-xs-4 col-sm-4">
                            <input type="text" class="form-control" value="" placeholder="必填项" id="update-bizRoleName" name="roleName">
                        </div>
                    </div>
                </div>
                <form>
                    <ul id="systemRoleTree2" class="ztree"></ul>
                </form>
            </div>
            <div class="modal-footer H65">
                <button onclick="sub();" type="button" class="btn btn-primary">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        //加载右侧权限树图
        $.ajax({
            type: "GET",
            url: "menu/getTreeMenuBiz",
            dataType: "json",
            success: function(data){
                var setting = {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            enable: true
                        }
                    }
                };
                $.fn.zTree.init($("#systemRoleTree"), setting, data);
                var systemRoleTreeObj = $.fn.zTree.getZTreeObj("systemRoleTree");
                //systemRoleTreeObj.expandAll(false);
                systemRoleTreeObj.expandAll(true);

                //禁用
                var nodes = systemRoleTreeObj.transformToArray(systemRoleTreeObj.getNodes());
                for (var i = 0, l = nodes.length; i < l; i++) {
                    systemRoleTreeObj.setChkDisabled(nodes[i], true);
                }

/**************测试的修改ztree*****/
                $.fn.zTree.init($("#systemRoleTree2"), setting, data);
                var systemRoleTree2Obj = $.fn.zTree.getZTreeObj("systemRoleTree2");
                //systemRoleTree2Obj.expandAll(false);
                systemRoleTree2Obj.expandAll(true);

            },
            error:function () {
                alert("error");
            }
        });

    });

    //商户管理展示所有
    $('#bizRoleTable').bootstrapTable({
        url: 'menu/getAllBizRole',         //请求后台的URL（*）
        toolbar : "#merchantRoleToolbar",
        method: 'get',
        striped: true,                      //是否显示行间隔色
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sortable: false,                     //是否启用排序
        sortOrder: "asc",                   //排序方式
        sidePagination: "client",           //分页方式：client客户端分页，server服务端分页（*）
        pageNumber: 1,                       //初始化加载第一页，默认第一页
        pageSize: 10,                       //每页的记录行数（*）
        pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
        strictSearch: true,
        showColumns: true,                  //是否显示所有的列
        showRefresh: true,                  //是否显示刷新按钮
        minimumCountColumns: 2,             //最少允许的列数
        clickToSelect: true,                //是否启用点击选中行
        uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
        showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
        cardView: false,                    //是否显示详细视图
        detailView: false,                   //是否显示父子表
        onClickRow: function (row) {
            //单击行事件，获取整行信息row
            $.ajax({
                type: "GET",
                url: "menu/getByRoleId?roleId="+row.roleId,
                dataType: "json",
                success: function(data){
                    //首先取消所有节点的禁用状态
                    var treeObj = $.fn.zTree.getZTreeObj("systemRoleTree");
                    var nodes = treeObj.transformToArray(treeObj.getNodes());
                    for (var i = 0, l = nodes.length; i < l; i++) {
                        treeObj.setChkDisabled(nodes[i], false);
                    }

                    //然后取消所有节点的选中
                    treeObj.checkAllNodes(false);
                    treeObj.cancelSelectedNode();

                    //获取所有节点的信息data
                    for(var i =0;i<data.length;i++){
                        var zTree = $.fn.zTree.getZTreeObj("systemRoleTree");
                        var node = zTree.getNodeByParam("id",data[i].menuId);
                        node.checked = true;
                        //设置选中之后，需要更新一次，否则无法选中该节点
                        zTree.updateNode(node);
                    }
                    //禁用
                    var nodes = treeObj.transformToArray(treeObj.getNodes());
                    for (var i = 0, l = nodes.length; i < l; i++) {
                        treeObj.setChkDisabled(nodes[i], true);
                    }

                    //模态框的tree
                    var treeObj2 = $.fn.zTree.getZTreeObj("systemRoleTree2");
                    treeObj2.checkAllNodes(false);
                    treeObj2.cancelSelectedNode();

                    //获取所有节点的信息data
                    for(var i =0;i<data.length;i++){
                        var zTree2 = $.fn.zTree.getZTreeObj("systemRoleTree2");
                        var node2 = zTree2.getNodeByParam("id",data[i].menuId);
                        node2.checked = true;
                        //设置选中之后，需要更新一次，否则无法选中该节点
                        zTree2.updateNode(node2);
                    }

                },
                error:function () {
                    alert("error");
                }
            });
        },
        columns: [
            {
                field: 'roleId',
                title: '角色id',
                visible:false
            }, {
                field: 'roleName',
                title: '角色名称'
            }, {
                field: 'roleType',
                title: '角色类型',
                formatter:function(value,row,index){
                    if(value == '1'){
                        return '平台';
                    }else if(value == '2') {
                        return '商户';
                    }
                }
            }, {
                field: 'address',
                title: '操作',
                formatter : function (value, row,index) {
                    return `
                       <a class="btn btn-default btn-sm" type="button"
                          data-toggle="modal"
                          onclick="modify_array(this,'${row.roleId}','${row.roleName}')">修改<span class="glyphicon glyphicon-pencil"></span></a>
                        <a class="btn btn-default btn-sm" onclick="del_array('${row.roleId}')">删除<span class="glyphicon glyphicon-trash"></span></a>
                    `;
                }
            }
        ]
    });
    /*获取事件对象*/
    var getEvent = function(){
        return window.event || arguments.callee.caller.arguments[0];
    }

    //修改角色权限，打开模态框
    function modify_array(e,index,roleName) {
        //获取权限菜单的id
        $("#indexId").val(index);
        $("#update-bizRoleName").val(roleName);
        $("#editModal").modal('show');

    }

    //提交确认，关闭模态框
    function sub() {
        var treeObj = $.fn.zTree.getZTreeObj("systemRoleTree2");
        var nodes = treeObj.getCheckedNodes(true);//在提交表单之前将选中的checkbox收集
        var array = new Array();
        for(var i=0;i<nodes.length;i++){
            array.push(nodes[i].id);
        }
        //修改权限
        $.ajax({
            type: "POST",
            url: "menu/saveMenuTree?menuList="+array+"&roleId="+$("#indexId").val()+"&roleName="+$("#update-bizRoleName").val(),
            dataType: "json",
            success: function(data){
                layer.msg(data.message, {icon: 1});
                $("#editModal").modal('hide');

                //修改成功，
                //更新右侧树图的节点，，首先取消所有选中状态
                var treeObj2 = $.fn.zTree.getZTreeObj("systemRoleTree");
                treeObj2.checkAllNodes(false);
                treeObj2.cancelSelectedNode();

                //更新每个节点的信息
                for(var i =0;i<nodes.length;i++){
                    var zTree2 = $.fn.zTree.getZTreeObj("systemRoleTree");
                    var node2 = zTree2.getNodeByParam("id",nodes[i].id);
                    node2.checked = true;
                    //设置选中之后，需要更新一次，否则无法选中该节点
                    zTree2.updateNode(node2);
                }

                //重新查询一次表格数据
                $.ajax({
                    type: "get",
                    url: "menu/getAllBizRole",
                    dataType:"json",
                    success : function(json) {
                        $("#bizRoleTable").bootstrapTable('load', json);
                    }
                })

            },
            error:function () {
                alert("error");
            }
        });
    }

    //删除角色
    function del_array(index) {
        layer.confirm('确认要删除吗？',
            {
                btn: ['确定','取消']
            },
            function(){
                //确认删除
                $.ajax({
                    type: "get",
                    url: "menu/deleteBizRole",
                    data:{roleId:index},
                    dataType: "json",
                    success : function(data) {
                        //state为true，删除成功
                        if(data.state){
                            layer.msg(data.message, {icon: 1});

                            //重新查询一次表格数据
                            $.ajax({
                                type: "get",
                                url: "menu/getAllBizRole",
                                dataType:"json",
                                success : function(json) {
                                    $("#bizRoleTable").bootstrapTable('load', json);
                                }
                            })

                            return true;
                        }else {
                            layer.msg("删除失败！", {icon: 2});
                            return false;
                        }
                    },
                    error:function () {
                        layer.msg('错误！', {icon: 2});
                        return false;
                    }
                });

            },
            function(){
                layer.msg('已取消！', {icon: 1});
                return false;
            }
        );
    }

</script>
</body>
</html>